import React from 'react';

import styles from './index.module.less';
import { ToBeCroppedProps } from './interface';

const ToBeCroppedList = ({
  toBeCroppedList,
  croppingIndex,
  setCroppingIndex
}: ToBeCroppedProps): JSX.Element => {
  return (
    <>
      <h1 className={styles['content-title']}>
        To be cropped{' '}
        <span className={styles['content-number']}>
          ({toBeCroppedList.length})
        </span>
      </h1>
      <div className={styles['image-list']}>
        {(toBeCroppedList || []).map((image, index) => {
          return (
            <div
              key={index}
              className={`
            ${styles['image-item']}
            ${croppingIndex === index ? styles.selected : ''}`}
              onClick={(): void => {
                setCroppingIndex(index);
              }}
            >
              <div className={styles['img-container']}>
                {image.originWidth >= image.originHeight ? (
                  <img src={image.originSrc} alt={image.name} width="86px" />
                ) : (
                  <img src={image.originSrc} alt={image.name} height="86px" />
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default ToBeCroppedList;
